<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #box{
            margin: 30px;
        }

        select{
            margin: 0 30px;
        }
    </style>
</head>
<body>
    <div id="box">
        <select class="one"></select>
        <select class="two"></select>
        <select class="three"></select>
    </div>
    <script src="./address.js"></script>
    <script>
        var info = [];

address.forEach(function (item) {

    if(item.TopID == 0){
        item.children = [];
        info.push(item);
    }
});

address.forEach(item =>{
            var res = info.findIndex(t=> t.ID== item.TopID);
            if(res ===  -1){
                return;
            }
            // console.log(res);
            item.children = [];
            item.one = res;
            item.two = info[res].children.length;
            info[res].children.push(item);
        });

        address.forEach(item =>{
            const res = address.find(t=> t.ID === item.TopID);
            if(!res){
                return
            }
            
            if(res.one === undefined){
                return;
            }
            
            console.log(item);
            info[res.one].children[res.two].children.push(item);


        });

        // console.log(info[0]);
    </script>

    <script>
        const one = document.querySelector('.one');
        const two = document.querySelector('.two');

        const three = document.querySelector('.three');

        let str = '';

        info.forEach(item=>{
            str += `<option value="${item.ID}">${item.AddName}</option>`;
        });

        one.innerHTML = str;
        secondValue()
        one.onchange = function(){
            secondValue()
        }
        function secondValue(){
            const id = one.value - 0; //所属省的id
            // const id = 1; 
            const res = info.find(item=> item.ID === id);
            // 根据id 拿到省份 

        //    console.log(res)
            two.innerHTML = res.children.reduce((prev,item)=>{
                return prev + 
                `<option value="${item.one}-${item.two}">${item.AddName}</option>`;
            },'') 
        }

        thirdValue()
        function thirdValue(){
            const id = two.value; //所属省的id
            // alert(typeof id);
            const onebox = id.split('-')[0]-0;
            const twobox = id.split('-')[1]-0;
            console.log(onebox,twobox)

            const thirdlist = info[onebox].children[twobox];
            console.log(thirdlist); //拿到的是市区的对象
            three.innerHTML = thirdlist.children.reduce((prev,item)=>{
                return prev + 
                `<option value="${item.ID}">${item.AddName}</option>`;
            },'')

        }

        two.onchange = function(){
            thirdValue()
        }
        
        
    </script>
</body>
</html>